<template>
  <View class="container" :style="{background: `#EFE8D6 url(${imgBasePath}tcm/page-header.png) no-repeat center top;`, 'background-size': 'contain'}">
    <View class="page-content" v-if="constitutionType">
      <View class="tip-label">您 / 的 / 体 / 质 / 是</View>
      <image class="tip-value" mode="heightFix" :src="titleConstant[constitutionType]"></image>
      <View class="content">
        <image mode="widthFix" class="up-content-box" :src="`${imgBasePath}tcm/up-content-box.png`"></image>
        <image mode="widthFix" class="lower-content-box" :src="`${imgBasePath}tcm/lower-content-box.png`">
        </image>
        <View class="left-line"></View>
        <View class="right-line"></View>
        <View class="title">
          <Text class="title-text">{{ reason.title }}</Text>
          <image class="title-bottom-image" mode="heightFix" :src="`${imgBasePath}tcm/title-bottom-bg.png`">
          </image>
        </View>
        <View class="page-text" style="margin-bottom: 0">
          <rich-text :nodes="formattedText(reason.desc)"></rich-text>
        </View>

        <image mode="widthFix" class="separator" :src="`${imgBasePath}tcm/separator.png`"></image>

        <block v-for="(item, index) in suggestions" :key="index">
          <View class="title">
            <Text class="title-text">{{ item.title }}</Text>
            <image class="title-bottom-image" mode="heightFix" :src="`${imgBasePath}tcm/sub-title-bottom-bg.png`">
            </image>
          </View>
          <View class="page-text">
            <rich-text :nodes="formattedText(item.desc)"></rich-text>
          </View>
        </block>
      </View>
      <View class="footer-tip">快把免费的体质检测福利分享给你关爱的家人朋友吧👇👇👇</View>
      <button class="button" open-type="share" @click="onShare">分享福利</button>
    </View>
  </View>
</template>
<script>
import { imgBasePath, trackingHost, stateHost } from "@/common/config";
import { v4 as uuidv4 } from 'uuid';
const title1 = `${imgBasePath}tcm/title-1.png`;
const title2 = `${imgBasePath}tcm/title-2.png`;
const title3 = `${imgBasePath}tcm/title-3.png`;
const title4 = `${imgBasePath}tcm/title-4.png`;
const title5 = `${imgBasePath}tcm/title-5.png`;
const title6 = `${imgBasePath}tcm/title-6.png`;
const title7 = `${imgBasePath}tcm/title-7.png`;
const title8 = `${imgBasePath}tcm/title-8.png`;
const title9 = `${imgBasePath}tcm/title-9.png`;
export default {
  name: "symptomIntroduction",
  data() {
    return {
      storeId: null,
      uuid: uuidv4(),

      titleConstant: {
        "PingHe": title1,
        "QiXu": title2,
        "QiYu": title3,
        "ShiRe": title4,
        "TanShi": title5,
        "TeBing": title6,
        "XueYu": title7,
        "YangXu": title8,
        "YinXu": title9,
      },
      constitutionType: "",
      reason: {},
      suggestions: [],
      recordId: null,
      imgBasePath,
    }
  },
  onLoad(params) {
    const { recordId, storeId, invitorCode } = params;
    this.recordId = recordId;
    this.storeId = +storeId;
    this.invitorCode = invitorCode;
    this.getConstitution(recordId);
    this.tcmResult("impression");
  },
  onShareAppMessage(res) {
    return {
      title: "快！亿万苍生，人分九种，来测测你的中医体质！",
      path: `pages/physiqueTest/index?storeId=${this.storeId}&source=2&invitorCode=${this.invitorCode}`,
      imageUrl: `${imgBasePath}tcm/share-image.png`,
    }
  },
  methods: {
    onShare() {
      this.tcmResult("share");
    },
    getConstitution(recordId) {
      this.$request("marketing-tcm/constitution/get-constitution", { params: { recordId }, method: "GET", showLoading: true, showToast: true })
        .then(res => {
          const { constitutionType, metaDto } = res;
          this.reason = metaDto.reason;
          this.constitutionType = constitutionType;
          this.suggestions = metaDto.suggestions;
        })
        .catch(error => { })
    },
    formattedText(text) {
      return text.replace(/#([^#\n]*)#/g, '<span style="font-family: PingFangSC-Semibold; font-weight: 600">$1</span>').replace(/\n/g, '<br>');
    },
    tcmResult(event) {
      const { unionid, openid } = uni.getStorageSync("userInfo")
      const params = {
        oid: openid,
        uid: unionid,
        sid: this.storeId,
        ts: Date.parse(new Date()) / 1000,
        event,
        page: "tcmResult",
        rid: this.recordId,
      }
      this.$request("event-tracking/user", { host: trackingHost, params })
        .catch(() => { })
    },
  },
}
</script>
<style lang="scss" scoped>
.container {
  min-height: 100vh;
  position: relative;
  font-family: "PingFangSC-Regular";

  .page-header {
    width: 100%;
  }

  .page-content {
    color: #333333;
    padding-top: 35rpx;
    padding-bottom: 150rpx;
    text-align: center;

    .tip-label {
      font-size: 24rpx;
      text-align: center;
      font-weight: 400;
      margin-bottom: 25rpx;
    }

    .tip-value {
      height: 138rpx;
      margin-bottom: 85rpx;
    }

    .content {
      margin: 0 24rpx;
      padding: 35rpx 48rpx 35rpx;
      background-color: #F8F5EE;
      position: relative;

      .up-content-box {
        position: absolute;
        width: 100%;
        top: -25rpx;
        left: 0;
      }

      .lower-content-box {
        position: absolute;
        width: 100%;
        bottom: -25rpx;
        left: 0;
      }

      .left-line {
        position: absolute;
        left: 0;
        top: 40rpx;
        width: 3rpx;
        height: calc(100% - 80rpx);
        background-color: #C7A27C;
      }

      .right-line {
        position: absolute;
        right: 0;
        top: 40rpx;
        width: 3rpx;
        height: calc(100% - 80rpx);
        background-color: #C7A27C;
      }

      .title {
        position: relative;
        font-family: "PingFangSC-Semibold";
        font-size: 42rpx;
        color: #370207;
        font-weight: 600;
        height: 68rpx;
        line-height: 68rpx;
        display: flex;
        justify-content: center;
        margin-bottom: 30rpx;

        .title-text {
          z-index: 1;
        }

        .title-bottom-image {
          height: 39rpx;
          position: absolute;
          bottom: 0;
        }
      }

      .separator {
        width: calc(100% - 120rpx);
        margin: 70rpx 0;
      }

      .page-text {
        font-size: 36rpx;
        text-align: justify;
        line-height: 60rpx;
        font-weight: 400;
        margin-bottom: 60rpx;
      }
    }

    .footer-tip {
      font-family: "PingFangSC-Semibold";
      font-size: 42rpx;
      text-align: center;
      line-height: 63rpx;
      font-weight: 600;
      margin-bottom: 48rpx;
      margin-top: 85rpx;
      padding: 0 69rpx;
    }

    .button {
      display: inline-block;
      height: 96rpx;
      width: calc(100% - 138rpx);
      background: #F55536;
      border-radius: 12rpx;
      line-height: 96rpx;
      text-align: center;
      font-family: "PingFangSC-Semibold";
      font-size: 36rpx;
      color: #FFFFFF;
      font-weight: 600;
      animation: 4s shareButton infinite;
    }
  }

}

@keyframes shareButton {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}
</style>